<template>
  <div>
    <ButtonGroup
      v-if="showBtn"
      :options="topButton"
      class="button-container"
      @click="handleButtonClick"
    />
    <div v-else class="search-top-search">
      <div class="left-box">
        <p-row :gutter="16">
          <p-col :span="8">
            <div class="item">
              <span class="item-left">拜访标题</span>
              <div class="item-right">
                <p-input
                  v-model="form.visitName"
                  placeholder="请输入"
                ></p-input>
              </div>
            </div>
          </p-col>
          <p-col :span="8">
            <div class="item">
              <span class="item-left">拜访状态</span>
              <SelectDefault
                v-model="form.visitState"
                class="item-right"
                :get-popup-container="triggerNode => triggerNode.parentNode"
                code="visit_status"
              />
            </div>
          </p-col>
          <p-col :span="8">
            <div class="item">
              <span class="item-left">拜访发起人姓名</span>
              <div class="item-right">
                <p-input
                  v-model="form.createUserName"
                  placeholder="请输入"
                ></p-input>
              </div>
            </div>
          </p-col>
        </p-row>
      </div>
      <div class="right-box">
        <p-button class="btn" type="primary" @click="searchLoadTableList">
          搜索
        </p-button>
        <p-button class="btn" @click="resForm">重置</p-button>
      </div>
    </div>
    
    <MainTableList
      :columns="columns"
      :data-source="dataSource"
      :row-selection="rowSelection"
      :loading="loading"
      :scroll="{ x: '100%', y: '53vh' }"
      :pagination="paginationMixin"
      slot-name="visitNo"
      @change="handleTableChange"
      @number-click="handleNumberClick"
    />
  </div>
</template>

<script>
import MainTableList from './mainTableList.vue';
import mixinTable from '@/mixins/mixin-table.js';
import { postVisitTableList } from '@/api/visit.js';

const defaultForm = {
  visitName: '', // 拜访标题
  visitState: '', // 拜访状态
  createUserName: '', // 拜访发起人姓名
};
export default {
  components: {
    MainTableList,
  },
  mixins: [mixinTable],
  props: {
    code: {
      type: [String, Number],
      default: '',
    },
    showBtn: {
      type: Boolean,
      default: false,
    },
    rowSelection: {
      type: Object,
      default: () => {},
    },
    keyTabs: {
      type: String,
      default: '12',
    },
    formInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false,
      form: {
        visitName: '', // 拜访标题
        visitState: '', // 拜访状态
        createUserName: '', // 拜访发起人姓名
      },
    };
  },
  computed: {
    topButton() {
      return [
        {
          key: 'add',
          type: 'primary',
          label: '新增拜访',
          icon: 'plus',
        },
      ];
    },
    stateOptions() {
      return this.$store.state.dictionary.dict['visit_status'] || {};
    },
    getSearchParams() {
      return {
        ...this.form,
      };
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '拜访编号',
          dataIndex: 'visitNo',
          width: 150,
          ellipsis: true,
          scopedSlots: { customRender: 'visitNo' },
        },
        {
          align: 'center',
          title: '拜访标题',
          dataIndex: 'visitName',
          ellipsis: true,
          width: 160,
        },
        {
          align: 'center',
          title: '拜访状态',
          dataIndex: 'visitState',
          ellipsis: true,
          width: 120,
          customRender: (text) => this.stateOptions[text],
        },
        {
          align: 'center',
          title: '拜访发起人部门',
          dataIndex: 'createUserDepartmentName',
          width: 160,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '拜访发起人姓名',
          dataIndex: 'createUserName',
          width: 160,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '拜访时间',
          dataIndex: 'visitTime',
          width: 160,
          ellipsis: true,
        },
      ];
      return columns;
    },
  },
  watch: {
    keyTabs: {
      handler(newVal) {
        newVal === '12' && this.getList();
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    searchLoadTableList() {
      this.paginationMixin.current = 1;
      this.getList();
    },
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
    addCallback() {
      const router = this.$router.resolve({
        path: '/visit-info',
        query: {
          customerName: this.formInfo.customerName,
          name: this.formInfo.name,
          customerNo: this.code,
          type: 'routerAdd',
        }
      })
      window.open(router.href, '_blank');
    },
    handleNumberClick(record) {
      const router = this.$router.resolve({
        path: '/visit-info',
        query: {
          visitNo: record.visitNo
        }
      })
      window.open(router.href, '_blank');
    },
    getParams() {
      const page = {
        ...this.form,
        current: this.paginationMixin.current,
        pageSize: this.paginationMixin.pageSize,
        customerCode: this.code,
      };
      return page;
    },
    async getList() {
      const data = this.getParams();
      this.loading = true;
      const result = await postVisitTableList({
        ...data,
      }).finally(() => (this.loading = false));
      this.dataSource = result?.data?.data?.records || [];
      this.paginationMixin.total = result?.data?.data?.total || 0;
    },

    resForm() {
      this.form = { ...defaultForm };
      this.searchLoadTableList();
    },
    // 分页
    handleTableChange(page, filters, sorter, { currentDataSource }) {
      // this.asc = sorter.order === 'ascend' ? true : false;
      // this.columnKey = sorter.columnKey;
      this.paginationMixin = page;
      this.getList();
    },
  },
};
</script>

<style lang="less" scope>
.search-top-search {
  display: flex;
  // padding: 10px 20px;
  width: 100%;
  background: #fff;
  // border: 1px solid #e5e6e9;
  margin-top: 10px;
  margin-bottom: 10px;
  .left-box {
    flex: 6;
    .item {
      display: flex;
      align-items: center;
      .item-left {
        width: 100px;
        padding-right: 8px;
        text-align: center;
      }
      .item-right {
        flex: 3;
      }
    }
  }
  .right-box {
    flex: 1;
    display: flex;
    flex-direction: row;
    margin-left: 20px;
    .btn {
      margin-right: 8px;
    }
  }
}
</style>
